<template>
  <div>
    <el-card>
      <el-form inline>
        <el-form-item label="名称:" class="mgb-0">
          <el-input v-model="name"></el-input>
        </el-form-item>
        <el-form-item class="mgb-0">
          <el-button type="primary" icon="el-icon-search" @click="searchData"></el-button>
          <el-button type="success" icon="el-icon-refresh" @click="clearSearch"></el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 10px">
      <el-table border :data="dataList" v-loading="tableLoading">
        <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
        <el-table-column label="名称" prop="name" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="流程定义key" prop="key" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="版本" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>v.{{scope.row.version}}</span>
          </template>
        </el-table-column>
<!--        <el-table-column label="部署时间" prop="lastUpdateTime" align="center" show-overflow-tooltip></el-table-column>-->
        <el-table-column label="流程bpmn文件名称" prop="resourceName" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="流程图片名称" prop="diagramResourceName" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="状态" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag v-if="!scope.row.suspended" type="success">已激活</el-tag>
            <el-tag v-if="scope.row.suspended" type="danger">挂起</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="272">
          <template slot-scope="scope">
            <el-button type="text" @click="mappingModel(scope.row.id)">映射模型</el-button>
            <el-button type="text" @click="packageDownload(scope.row.deploymentId)">打包下载</el-button>
            <el-button type="text" v-if="!scope.row.suspended" @click="hangUp(scope.row.id)" style="color: red">挂起</el-button>
            <el-button type="text" v-if="scope.row.suspended" @click="active(scope.row.id)">激活</el-button>
            <el-button type="text" style="color: red" @click="deleteItem(scope.row.deploymentId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="float:right; margin: 10px 0;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="[10, 15, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        prev-text="上一页"
        next-text="下一页"
        :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
  import FlowManageApi from '@/api/workFlow/FlowManageApi'
  export default {
    name: 'flowManage',
    data(){
      return{
        name:'', //名称
        tableLoading:false,
        dataList:[],
        pageNo: 1, //当前页面
        pageSize: 10, // 当前页数
        total: 0, // 总条数
        isShowModelDialog:false,
      }
    },
    created(){
      this.getData()
    },
    methods: {
      //获取表格数据源
      getData() {
        this.tableLoading = true
        let data = {
          name: this.name,
          pageNo: this.pageNo,
          pageSize: this.pageSize,
        }
        this.getTableListData(new FlowManageApi(), data, 'list').then(res => {
          this.dataList = res.dataList
          this.pageNo = res.pageNo
          this.pageSize = res.pageSize
          this.total = res.total
          this.tableLoading = false
        })
      },
      // 当前页码修改时
      handleCurrentChange(pageNo) {
        this.pageNo = pageNo
        this.getData()
      },
      // 当前页数修改时
      handleSizeChange(pageSize) {
        this.pageSize = pageSize
        this.getData()
      },
      //搜索
      searchData() {
        this.pageNo = 1
        this.getData()
      },
      //清空搜索
      clearSearch() {
        this.name = ''
      },
      //映射模型
      mappingModel(processDefinitionId){
        let http = new FlowManageApi()
        http.mapping({processDefinitionId}).then(res => {
          this.$message.success('映射成功！')
          this.getData()
        })
      },
      //打包下载
      packageDownload(deploymentId){
        let http = new FlowManageApi()
        http.downloadZip({deploymentId}).then(res => {
          console.log(res)
          const blob = new Blob([res], {type: 'application/zip'});
          // const filename = res.res.headers['content-disposition'];
          const downloadElement = document.createElement('a');
          const href = window.URL.createObjectURL(blob); //创建下载的链接
          downloadElement.href = href;
          [downloadElement.download] = ['流程zip包'];
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放blob对象
        })
      },
      //挂起
      hangUp(processDefinitionId){
        let http = new FlowManageApi()
        http.suspend({processDefinitionId}).then(res => {
          this.$message.success('挂起成功！')
          this.getData()
        })
      },
      //激活
      active(processDefinitionId){
        let http = new FlowManageApi()
        http.active({processDefinitionId}).then(res => {
          this.$message.success('激活成功！')
          this.getData()
        })
      },
      //删除
      deleteItem(deploymentId){
        this.$confirm('您确定要删除此项吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          const loading = this.$loading({
            lock: true,
            text: '正在删除.....',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          let http = new FlowManageApi()
          http.delete({deploymentId}).then(res => {
            loading.close()
            if(res.code === 200){
              this.$message.success('删除成功！')
              this.getData()
            }else{
              this.$message.error('删除失败！')
            }
          }).catch(err => {
            loading.close()
          })
        }).catch(() => {
          this.$message.info('已取消删除')
        })
      },
    }
  }
</script>

<style scoped>

</style>
